<template>
  <main class="wss-container">
    <div class="business-list">
      <el-row :gutter="20" type="flex">
        <el-col :span="8">
          <NewCard title="商务列表" :isright="true" :border="false">
            <template #right>
              <ComForm @EventOnsubmit="inqiureFn" :list="comForm" v-if="isRolesShow()"></ComForm>
            </template>
            <!-- 表格 -->
            <el-table
              :data="ManagerList"
              style="width: 100%"
              highlight-current-row
              show-summary
              :summary-method="getSummaries"
              @row-click="rowClick"
              v-hasPermi="['work:commercialManager:cmList']"
              v-if="isRolesShow()"
            >
              <el-table-column label="商务姓名" prop="name" width="80" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="phonenumber" label="手机号" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="createTime"  label="加入时间">
                <template slot-scope="scope">
                  <p>{{scope.row.createTime && scope.row.createTime.split(" ")[0]}}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="amount"
                sortable
                label="累计业绩"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.amount | sumFilters }}</p>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 30, 40]"
                  :pager-count="5"
                  layout="prev, pager, next"
                  :total="pageing.total"
                >
                </el-pagination>
              </div>

          </NewCard>
        </el-col>
        <el-col :span="16">
          <NewCard :title="`商务-${selectItem.name}`">
            <Visual :selectItem="selectItem" v-if="isRolesShow()"></Visual>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import Visual from "./visual";
import { getCommercialManagerCmListApi } from "@/wss/newApi_3-24/work/commercialManager.js";
const arr = [undefined, null, ""];
export default {
  name: "BusinessList",
  components: { NewCard, ComForm, Visual },
  data() {
    return {
      // 表单配置
      comForm: {
        modes: [
          {
            mode: "name",
            formType: "input",
            placeholder: "姓名",
          },
        ],
      },
      pageing: { pageNum: 1, pageSize: 10, total: 0 },

      // 商务列表
      ManagerList: [],
      // 商务过滤列表
      ManagerListFilter: [],
      selectItem:{},//选择某一行，选择某一个商务
    };
  },
  created() {
    this.getCommercialManagerFn();
  },
  methods: {

    // 判断当前项目列表是否展示 根据角色
    isRolesShow(){
      let roles = this.$store.state.user.roles
      if(roles.includes('admin') || roles.includes('swzy')){
        return true
      }else{
        return false
      }
    },

    // 查询函数
    inqiureFn([{ name = "" }]) {
      const ManagerList = this.ManagerListFilter;
      this.ManagerList = ManagerList.filter((item) =>
        item?.name?.includes(name)
      );
    },

    // 获取商务列表
    async getCommercialManagerFn() {
      let { code, rows,total } = await getCommercialManagerCmListApi(this.pageing);

      if (code != 200) return;
      this.pageing.total=total
      this.ManagerList = JSON.parse(JSON.stringify(rows));
      this.ManagerListFilter = JSON.parse(JSON.stringify(rows));
      this.selectItem = this.ManagerList[0]// 默认选中一行
    },

    // 点击某一行
    rowClick(row, column, event){
      this.selectItem = row
    },

    // 表格总计行的规则 ****************
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sums[index] = "--";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = "--";
        }
        if (index === 3) {
          sums[index] = this.$options.filters["sumFilters"](sums[index]);
          return;
        }
      });

      return sums;
    },
    // 表格总计行的规则 **************** end
      // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getCommercialManagerFn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getCommercialManagerFn();
    },
  },
};
</script>

<style scoped>
.business-list {
  height: 100%;
  overflow: initial;
}
.business-list .el-row {
  height: 100%;
}
.business-list .el-row >>> .el-card__body {
  height: 100%;
}
.business-list .el-row >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.business-list .el-row >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 表单搜索 */
::v-deep .business-list .el-form .el-input--medium {
  width: 120px !important;
}
::v-deep .business-list .el-form .el-button--default {
  display: none;
}

/* 表格样式 */
.el-table {
  margin-bottom: 10px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}

.pagination{
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 1180px) {
  ::v-deep .business-list .el-form .el-input--medium {
    width: 60px !important;
  }
  ::v-deep .business-list .el-form .el-input--medium .el-input__inner {
    padding: 0 10px;
  }
}
</style>